<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/axios.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/query.js"></script>
    <title>niubi</title>
    <style lang="css"></style>
  </head>
  <body>
    <div id="app" class="app">
      <div class="headerTab" data-v-ecf6120e=""><p>2022-01-28  南京南 到 界首南 车票查询</p></div>
      <div class="box">
        <div
          class="box-item"
          :style="{width:(100/trainList.length)-2+'%'}"
          v-for="item,index in trainList"
        >
          <div class="item">
            <table width="100%" class="table">
                <thead>
                  <tr>
                    <th>车次</th>
                    <th>出发站</th>
                    <th>到达站</th>
                    <th>历时</th>
                    <th>一等座</th>
                    <th>二等座</th>
                    <!-- <th>硬座</th>
                    <th>无座</th> -->
                  </tr>
                </thead>
                <tr>
                    <td>{{item.train_no}}</td>
                    <td>{{item.from_station_name}}</td>
                    <td>{{item.to_station_name}}</td>
                    <td>{{item.duration}}</td>
                    <td>{{item.sit_1 }}</td>
                    <td>{{item.sit_2 }}</td>
                    <!-- <td>{{item.sit_h }}</td>
                    <td>{{item.sit_0 }}</td> -->
                </tr>
              </table>
             <div class="PrevClass">
                 <p>{{item.from_station_name}}    上一站为  {{ item.PrevList[0].station_name}} </p>
                 <p v-for="PrevItem,PrevIndex in item.PrevList">
                    {{PrevItem.station_name}} -> {{PrevItem.arrive_time}} ->
                    {{PrevItem.start_time}}
                  </p>
             </div>
          </div>
          <!-- <div class="trianInfo">
            <p v-for="childrenItem,childrenIndex in item.children">
              {{childrenItem.station_name}} -> {{childrenItem.arrive_time}} ->
              {{childrenItem.start_time}}
            </p>
          </div> -->
          <div class="trainPlan">
            <table width="100%" class="table">
                <caption>
                    <h4 class="mb5">{{item.from_station_name}}   ->  {{ item.PrevList[0].station_name}}</h4>
                    <span>(筛选{{item.from_station_name}}到{{ item.PrevList[0].station_name}} {{item.PrevList[1].start_time}}之前 7.30之后的数据)</span>
                </caption>
                <thead>
                  <tr>
                    <th>车次</th>
                    <th>起</th>
                    <th>终</th>
                    <th>时间</th>
                    <th>历时</th>
                    <th>一等</th>
                    <th>二等</th>
                    <th>硬</th>
                    <!-- <th>无</th> -->
                  </tr>
                </thead>
                <tbody>
                   <tr v-for="back_Item,backi in item.backList">
                        <td>{{back_Item.train_no}}</td>
                        <td>{{back_Item.from_station_name}}</td>
                        <td>{{back_Item.to_station_name}}</td>
                        <td>{{back_Item.start_time}}<br>{{back_Item.end_time}}</td>
                        <td>{{back_Item.duration}}</td>
                        <td>{{back_Item.sit_1 }}</td>
                        <td>{{back_Item.sit_2 }}</td>
                        <td>{{back_Item.sit_h }}</td>
                        <!-- <td>{{item.sit_0 }}</td> -->
                    </tr> 
                </tbody>
              </table> 
          </div>
          <div class="trainPlan">
            <table width="100%" class="table">
                <caption>
                    <h4 class="mb5">{{ item.PrevList[0].station_name}} -> {{item.from_station_name}} </h4>
                    <span>(筛选{{ item.PrevList[0].station_name}} 到 {{item.from_station_name}}{{item.PrevList[1].start_time}}之前 7.30之后的数据) </span>
                </caption>
                <thead>
                  <tr>
                    <th>车次</th>
                    <th>起</th>
                    <th>终</th>
                    <th>时间</th>
                    <th>历时</th>
                    <th>一等</th>
                    <th>二等</th>
                    <th>硬</th>
                    <!-- <th>无</th> -->
                  </tr>
                </thead>
                <tbody>
                   <tr v-for="goItem,goi in item.goList">
                            <td>{{goItem.train_no}}</td>
                            <td>{{goItem.from_station_name}}</td>
                            <td>{{goItem.to_station_name}}</td>
                            <td>{{goItem.start_time}}<br>{{goItem.end_time}}</td>
                            <td>{{goItem.duration}}</td>
                            <td>{{goItem.sit_1 }}</td>
                            <td>{{goItem.sit_2 }}</td>
                            <td>{{goItem.sit_h }}</td>
                        <!-- <td>{{item.sit_0 }}</td> -->
                    </tr> 
                </tbody>
              </table> 
          </div>
        </div>
      </div>
       


        <div class="loader" v-show="showLoad">
            <div style=" text-align: center; color: #147fed; ">{{loadMsg}}</div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
  </body>
  <script src="./js/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
      width: 100%;
    }
    .app {
      width: 100%;
      height: 100%;
      background-image: url(http://vergil_lu.gitee.io/v3-big-screen/assets/bg.80021764.png);
      background-size: cover;
      background-position: center center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .headerTab {
      width: 100%;
      height: 9%;
      background-image: url(http://vergil_lu.gitee.io/v3-big-screen/assets/headerBg.324ecc80.png);
      background-size: cover;
      background-position: center center;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .app > div {
        color: #c5c8cc;
    }
    .box {
      display: flex;
      justify-content: space-evenly;
      height: 90%;
    }
    .box .item {
      padding: 20px 0;
      border-radius: 5px;
      text-align: center;
      position: relative;
    }
    .box .item:before{
        display: block;
        position: absolute;
        top: -5px;
        left: -2px;
        content: "";
        width: 111px;
        height: 35px;
        background-image: url();
        transform: rotate(
    180deg);
    }
    .box .item:after{
        display: block;
    position: absolute;
    bottom: -5px;
    right: -2px;
    content: "";
    width: 111px;
    height: 35px;
    background-image: url();
    }
    .box .item > div {
      margin-top: 5px;
    }
    .box .box-item .trianInfo {
      text-align: center;
    }
    table {
      border-collapse: collapse;
      margin: 0 auto;
      text-align: center;
    }
    .trainPlan table td,
     table th { 
      color: #c5c8cc;
      height: 30px;
      width: 100px;
    }
    
    table thead th {
      width: 100px;
    }
    .trainPlan table thead th {
      background: #1a293f;
    }
    .PrevClass p{
        margin-bottom: 10px;
    }
    .trainPlan{
        margin-top: 30px;
        font-size: 14px;
    }
    .mb5{
        margin-bottom: 5px;
}
    /*  */
    .trainPlan table>tbody>tr, .trainPlan table>thead{
        display: table;
        table-layout: fixed; /* 重要  表格固定算法 */
        margin: 2px 0;
        border-bottom: 1px dotted #2e659d;
    }
    .trainPlan table>tbody{
        height: 200px;
        display: block;
        overflow: hidden;
        overflow-y: auto;
    }
    /*修改滚动条样式*/
tbody::-webkit-scrollbar{
  width:4px;
  height:4px;
  /**/
}
tbody::-webkit-scrollbar-track{
  background: #1a293f;
  border-radius:2px;
}
tbody::-webkit-scrollbar-thumb{
  background: #2e659d;
  border-radius:10px;
}
tbody::-webkit-scrollbar-thumb:hover{
  background: #333;
}
tbody::-webkit-scrollbar-corner{
  background: #179a16;
}
/*  */
.loader {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	width: 175px;
	height: 100px;
}
.loader span {
	display: block;
	background: #ccc;
	width: 7px;
	height: 10%;
	border-radius: 14px;
	margin-right: 5px;
	float: left;
	margin-top: 25%;
}
.loader span:last-child {
	margin-right: 0px;
}
.loader span:nth-child(1) {
 animation: load 2.5s 1.4s infinite linear;
}
.loader span:nth-child(2) {
 animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(3) {
 animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(4) {
 animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(5) {
 animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(6) {
 animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(7) {
 animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(8) {
 animation: load 2.5s 0s infinite linear;
}
.loader span:nth-child(9) {
 animation: load 2.5s 0.2s infinite linear;
}
.loader span:nth-child(10) {
 animation: load 2.5s 0.4s infinite linear;
}
.loader span:nth-child(11) {
 animation: load 2.5s 0.6s infinite linear;
}
.loader span:nth-child(12) {
 animation: load 2.5s 0.8s infinite linear;
}
.loader span:nth-child(13) {
 animation: load 2.5s 1s infinite linear;
}
.loader span:nth-child(14) {
 animation: load 2.5s 1.2s infinite linear;
}
.loader span:nth-child(15) {
 animation: load 2.5s 1.4s infinite linear;
}
@keyframes load {
 0% {
 background: #ccc;
 margin-top: 25%;
 height: 10%;
}
 50% {
 background: #444;
 height: 100%;
 margin-top: 0%;
}
 100% {
 background: #ccc;
 height: 10%;
 margin-top: 25%;
}
}
  </style>
</html>
